<template>
	<view>
		<view class="goods-container">
			<view class="good-card" v-for="item in goodsList" :key="item.id">
				<view class="goods-info">
					<view class="checkbox">
						<evan-checkbox v-model="item.isChecked" shape="square" primary-color="#354E44"></evan-checkbox>
					</view>
					<view class="goods">
						<view class="goods-img">
							<image :src="item.productPic" mode=""></image>
						</view>
						<view class="goods-desc">
							<view class="goods-name">
								{{item.productBrand}}
							</view>
							<text class="goods-id">编号:{{item.productSkuId}}</text>
							<text class="goods-price">价格￥{{item.price}}</text>
							<text class="goods-number">数量：{{item.quantity}}</text>
						</view>
					</view>
				</view>
				<view class="stepp">
					<view class="step">
						<button class="reduce" @tap="reduce(item.id)">-</button>
						<view class="text">
							{{item.quantity}}
						</view>
						<button class="add" @tap="add(item.id)">+</button>
					</view>
				</view>
			</view>
		</view>

		<view class="footer">
			<view class="all">
				<evan-checkbox v-model="isAll" shape="square" primary-color="#354E44">全选</evan-checkbox>
			</view>
			<view class="total">
				合计￥
				<text>{{total}}</text>

				<view class="order" @tap="order">
					结算
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		getCar
	} from "../../utils/goodsInfo/getCar/index.js"
	import {
		delCar
	} from "../../utils/goodsInfo/addCar/delCar/index.js"
	import {order} from "../../utils/goodsInfo/addCar/order/index.js"
	const app = getApp();
	export default {
		data() {
			return {

				goodsList: [],
				ids: [],
				orderList:[],
				orderInfo:[],
				orderId:''

			}
		},
		methods: {
			init() {
				getCar().then(res => {
					// console.log(res)
					res.data.items.forEach(el => {
						el.isChecked = false
					})
					this.goodsList = res.data.items
				})
			},
			add(id) {
				const index = this.goodsList.findIndex(el => el.id == id)
				this.goodsList[index].quantity++

			},
			reduce(id) {
				const index = this.goodsList.findIndex(el => el.id == id)
				if (this.goodsList[index].quantity <= 1) {
					var _this = this
					uni.showModal({
						title: "是否要删除该商品",
						success(res) {
							if (res.confirm) {
								_this.ids = []
								_this.goodsList.forEach(el => {
									if (el.isChecked) {
										// console.log(el.id)
										_this.ids.push(el.id)
									}
								})
								// console.log(_this.ids)

								delCar(
									_this.ids
								).then(res => {
									console.log(res)
									_this.init()
								})

							}
						}
					})

				} else {
					this.goodsList[index].quantity--
				}

			},
			order(){
				this.orderList=[]
			
			
				this.goodsList.forEach(el=>{
					if(el.isChecked){
						var obj={}
					
						
						obj.productId=el.productId
						obj.productQuantity=el.quantity
						obj.productSkuId=el.productSkuId
						obj.cartId=el.id
					
						this.orderList.push(obj)
					}
					
				})
				
			
					console.log(this.goodsList)
				app.globalData.orderList=this.orderList
				app.globalData.orderInfo=this.orderInfo
				
				order({
					"addressId": "string",
					"orderId": "string",
					"orderItemList": this.orderList,
					"payType": 0,
					"sourceType": 0
					}).then(res=>{
						// console.log(res)
						this.orderId=res.data.orderId
						// console.log(this.orderId)
						uni.showToast({
							title:"购买成功 1s后跳到订单确认页",
							icon:"none"
						})
					})	
					setTimeout(()=>{
						uni.navigateTo({
							url:'/pages/cart/order/order?id='+this.orderId
						})
					},1000)
			}
				
		},
		onLoad() {
			this.init()
			
		},
		components: {


		},
		watch: {

		},
		computed: {
			isAll: {
				get() {
					return this.goodsList.every(el => el.isChecked)
				},
				set(val) {

					return this.goodsList.forEach(el => el.isChecked = val)
				}
			},
			total() {
				var sum = 0;
				this.goodsList.forEach((el) => {
					if (el.isChecked) {
						sum += el.price * el.quantity
					}
				})
				return sum
			}

		}
	}
</script>

<style scoped lang="scss">
	.good-card {
		width: 672rpx;
		margin: 50rpx auto;
		background-color: #fff;
		border-radius: 24rpx;
		padding: 20rpx 20rpx;
		box-sizing: border-box;

		.goods-info {
			display: flex;
			justify-content: flex-start;
			align-items: center;

			.goods {
				display: flex;
				justify-content: flex-start;
				align-items: center;

				.goods-img {
					width: 136rpx;
					height: 136rpx;

					image {
						width: 100%;
						height: 100%;
					}
				}

				.goods-desc {
					.goods-name {
						font-size: 26rpx;
						color: #3e3e3e;
					}

					.goods-id,
					.goods-price,
					.goods-number {
						font-size: 22rpx;
						color: #8d8d8d;
					}
				}

			}
		}

		.stepp {
			display: flex;
			justify-content: flex-end;
			align-items: center;

			.step {
				float: right;
				display: flex;
				justify-content: center;
				align-items: center;
				width: 246rpx;
				height: 60rpx;

				button {
					width: 60rpx;
					height: 60rpx;
					background: #f1ece7;
					border-radius: 50%;
					text-align: center;
					line-height: 60rpx;
					font-size: 30rpx;
					margin: 0 6rpx;
					text-align: center;
					display: flex;
					justify-content: center;
					align-items: center;
				}

				.text {
					width: 90rpx;
					height: 60rpx;
					background: #f1ece7;
					text-align: center;
					line-height: 60rpx;
					font-size: 30rpx;
					border-radius: 30rpx;
				}

			}
		}
	}

	.footer {
		position: fixed;
		display: flex;
		align-items: center;
		left: 0;
		bottom: 0;
		width: 100%;
		height: 150rpx;
		background-color: #fff;
		justify-content: space-around;

		.order {
			display: inline-block;
			width: 208rpx;
			height: 80rpx;
			background: #354e44;
			border-radius: 28rpx;
			color: #fff;
			font-size: 36rpx;
			line-height: 80rpx;
			text-align: center;
		}

		.total text {
			color: red;
		}
	}

	.goods-container {
		padding-bottom: 150rpx;
	}
</style>
